<template>
  <sv-page>
    <view class="index">
      <!-- 热门职业 -->
      <view class="cu-bar">
        <view class="action">
          <text class="cuIcon-titles text-green"></text>
          <text class="text-xl text-bold">热门职业</text>
        </view>
      </view>
      <!-- 宫格 -->
      <view class="cu-list grid col-4 no-border sv-cu-grid">
        <view
          class="cu-item"
          v-for="item in professionArr"
          :key="item.profession_id"
          @click="onProfession(item)"
        >
          <view class="sv-icons-github text-sl padding-top-sm"></view>
          <text>{{ item.profession_name }}</text>
        </view>
      </view>
      <!-- 热门题库 -->
      <view class="cu-bar">
        <view class="action">
          <text class="cuIcon-titles text-green"></text>
          <text class="text-xl text-bold">热门题库</text>
        </view>
      </view>
      <!-- 列表 -->
      <view class="sv-tn-tabs-list">
        <tn-tabs class="sv-tn-tabs" @change="changeTabs">
          <tn-tabs-item
            v-for="(item, index) in professionArr"
            :key="index"
            :title="item.profession_name"
            :name="item.profession_id"
          />
        </tn-tabs>
        <view class="cu-list menu sm-border sv-cu-list">
          <view
            class="cu-item arrow"
            v-for="item in libArr"
            :key="item.lib_id"
            @click="onLib(item)"
          >
            <view class="content">
              <text class="cuIcon-circlefill text-grey"></text>
              <text class="text-cyan">{{ item.lib_name }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </sv-page>
</template>

<script setup>
import { ref } from 'vue'
import { onPullDownRefresh, onLoad } from '@dcloudio/uni-app'
import { professionList } from '@/service/api/profession'
import { libList } from '@/service/api/exam'

onPullDownRefresh(async () => {
  await handleInit()
  uni.stopPullDownRefresh()
})

onLoad(async () => {
  uni.showLoading({ title: '加载中' })
  await handleInit()
  uni.hideLoading()
})

const professionArr = ref([])
const libArr = ref([])

async function handleInit() {
  // 初始化变量
  professionArr.value = []
  libArr.value = []
  // 获取所有职业列表
  const professionRes = await professionList()
  professionArr.value = professionRes.data
  // 初始化请求tabs栏首个题库列表
  await getLibByProId(professionArr.value[0].profession_id)
}

function onProfession(e) {
  uni.navigateTo({ url: `/pages/index/profession/profession?pid=${e.profession_id}` })
}

async function getLibByProId(profession_id) {
  const libRes = await libList({
    profession: profession_id
  })
  libArr.value = libRes.data || []
  console.log('====  libArr.value  :', libArr.value)
}

function changeTabs(e) {
  getLibByProId(e)
}

function onLib(item) {
  uni.navigateTo({
    url: `/pages/lib/lib?lib_id=${item.lib_id}`
  })
}
</script>

<style lang="scss">
.index {
}
</style>
